侧滑操作容器与展开事件

在 Scripting 中,你可以为用作 <List> 列表行的视图(如 <HStack>)添加滑动操作按钮,支持如“删除”、“编辑”、“收藏”等常见交互。

为了更清晰地支持 TypeScript,Scripting 将 SwiftUI 的 swipeActions 拆分为两个方向明确的修饰符:

  • leadingSwipeActions: 向右滑动(从左到右)
  • trailingSwipeActions: 向左滑动(从右到左)

leadingSwipeActions

为列表行的 左侧(leading) 添加滑动操作。

类型

leadingSwipeActions?: {
  allowsFullSwipe?: boolean
  actions: VirtualNode[]
}

参数说明

  • actions: 滑动后显示的按钮组件数组(通常为 <Button>)。
  • allowsFullSwipe: 是否允许“完全滑动”直接执行第一个按钮的操作。默认值为 true。

trailingSwipeActions

为列表行的 右侧(trailing) 添加滑动操作。

类型

trailingSwipeActions?: {
  allowsFullSwipe?: boolean
  actions: VirtualNode[]
}

参数说明

  • actions: 滑动后显示的按钮组件数组(通常为 <Button>)。
  • allowsFullSwipe: 是否允许“完全滑动”直接执行第一个按钮的操作。默认值为 true。

示例用法

<List>
  {list.map(item => 
    <HStack
      trailingSwipeActions={{
        allowsFullSwipe: true,
        actions: [
          <Button
            title="删除"
            role="destructive"
            action={() => deleteItem(item)}
          />,
          <Button
            title="编辑"
            tint="accentColor"
            action={() => editItem(item)}
          />
        ]
      }}
    >
      <Image systemName={item.icon} />
      <Text>{item.title}</Text>
    </HStack>
  )}
</List>

添加左滑操作(向右滑)示例:

<HStack
  leadingSwipeActions={{
    actions: [
      <Button
        title="收藏"
        tint="orange"
        action={() => markAsFavorite(item)}
      />
    ]
  }}
>
  <Text>{item.title}</Text>
</HStack>

<Button> 属性说明

每个滑动操作项都是一个 <Button>,你可以使用以下属性来自定义外观与行为:

  • title: 按钮显示文本
  • action: 点击按钮时执行的函数
  • role(可选): 设置为 "destructive" 会显示红色,适用于“删除”操作
  • tint(可选): 自定义按钮颜色,例如 "accentColor" 或系统颜色名

注意事项

  • leadingSwipeActions 和 trailingSwipeActions 可以在同一个行视图上同时使用。
  • 仅用于列表行中的视图(例如 <List> 中的 <HStack>)才支持滑动操作。
  • 当 allowsFullSwipe 为 false 时,用户必须点击按钮,而不能通过滑动全程触发操作。

iOS 27 自定义滑动操作容器

在 LazyVStack 等自定义容器上设置 swipeActionsContainer,协调子视图的滑动操作。各行继续使用 leadingSwipeActions 和 trailingSwipeActions。

<LazyVStack swipeActionsContainer>
  {/* 设置 leadingSwipeActions 或 trailingSwipeActions 的行 */}
</LazyVStack>

此容器修饰符要求 iOS 27.0+,旧系统忽略。传入 false 表示不添加容器,不会禁用祖先已经设置的容器。


展开状态回调(iOS 27.0+)

leadingSwipeActions 和 trailingSwipeActions 都支持 onPresentationChanged?: (isPresented: boolean) => void,在侧滑操作展开或关闭时调用。旧系统继续显示侧滑操作,但不调用此回调。直接 props 与链式 modifiers 的参数一致。

<Text trailingSwipeActions={{
  allowsFullSwipe: false,
  actions: [<Button role="destructive" action={remove}>Delete</Button>],
  onPresentationChanged: isPresented => console.log(isPresented),
}}>Row</Text>